import { Form, Modal, Input, Select } from 'antd';
import React from 'react';
import { FormComponentProps } from 'antd/es/form';
import { Order } from '../../model';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};

interface CollectionCreateFormProps extends FormComponentProps {
  orderData?: Order;
  visible?: boolean;
  onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
  onCreate?: (selectedRows: any) => void;
  confirmLoading?: boolean;
}

const CollectionCreateForm = Form.create<CollectionCreateFormProps>({ name: 'form_in_modal' })(
  // eslint-disable-next-line react/prefer-stateless-function
  class extends React.Component<CollectionCreateFormProps> {
    render() {
      const { orderData, visible, onCancel, onCreate, form, confirmLoading } = this.props;
      const { getFieldDecorator } = form;
      return (
        <Modal
          visible={visible}
          title="填写发货信息"
          okText="确认发货"
          onCancel={onCancel}
          onOk={onCreate}
          confirmLoading={confirmLoading}
        >
          <Form>
            <Form.Item {...formItemLayout} label="编号">
              {getFieldDecorator<Order>('id', {
                initialValue: orderData?.id,
              })(<Input readOnly />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="订单编号">
              {getFieldDecorator<Order>('orderSn', {
                initialValue: orderData?.orderSn,
              })(<Input readOnly />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="收货人">
              {getFieldDecorator<Order>('receiverName', {
                initialValue: orderData?.receiverName,
              })(<Input readOnly />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="手机号码">
              {getFieldDecorator<Order>('receiverPhone', {
                initialValue: orderData?.receiverPhone,
              })(<Input readOnly />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="邮政编码">
              {getFieldDecorator<Order>('receiverPostCode', {
                initialValue: orderData?.receiverPostCode,
              })(<Input readOnly />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="收货地址">
              {getFieldDecorator('receiveAddress', {
                initialValue:
                  orderData?.receiverProvince +
                  orderData?.receiverCity +
                  orderData?.receiverRegion +
                  orderData?.receiverDetailAddress,
              })(<Input readOnly />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="配送方式">
              {getFieldDecorator<Order>('deliveryCompany', {
                rules: [{ required: true, message: '请选择配送方式' }],
              })(
                <Select placeholder="请选择物流公司">
                  <Option value="顺丰快递">顺丰快递</Option>
                  <Option value="圆通快递">圆通快递</Option>
                  <Option value="中通快递">中通快递</Option>
                  <Option value="韵达快递">韵达快递</Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item {...formItemLayout} label="物流单号">
              {getFieldDecorator<Order>('deliverySn', {
                rules: [{ required: true, message: '请填写物流单号' }],
              })(<Input />)}
            </Form.Item>
          </Form>
        </Modal>
      );
    }
  },
);

export default CollectionCreateForm;
